<!DOCTYPE html>
<html>
<head>
    <title>Refraction Diagram</title>
</head>
<body>
    <canvas id="physicsCanvas" width="500" height="350"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Style
        ctx.fillStyle = 'white';
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        ctx.strokeStyle = 'black';
        ctx.lineWidth = 1.5;
        ctx.font = 'italic 20px Times New Roman';
        ctx.textAlign = 'center';

        // Parameters
        const slabX = 230;
        const slabWidth = 80;
        const topRayEntryY = 140;
        const raySpacing = 70;
        const bottomRayEntryY = topRayEntryY + raySpacing;
        const alpha0_deg = 38; // Angle of incidence in degrees
        const alpha0_rad = alpha0_deg * Math.PI / 180;
        const n1_over_n2 = 1.0 / 1.5; // Assumed refractive index ratio (e.g., air to glass)
        const alpha2_rad = Math.asin(n1_over_n2 * Math.sin(alpha0_rad));

        // Slab
        ctx.fillStyle = '#E0E0E0';
        ctx.fillRect(slabX, 0, slabWidth, canvas.height);
        ctx.strokeStyle = 'black';
        ctx.strokeRect(slabX, 0, slabWidth, canvas.height);

        // Arrowhead drawing function
        function drawArrowheadAtMidpoint(x1, y1, x2, y2) {
            const midX = (x1 + x2) / 2;
            const midY = (y1 + y2) / 2;
            const angle = Math.atan2(y2 - y1, x2 - x1);
            const headLength = 10;
            const arrowAngle = Math.PI / 8;

            ctx.beginPath();
            ctx.moveTo(midX, midY);
            ctx.lineTo(midX - headLength * Math.cos(angle - arrowAngle), midY - headLength * Math.sin(angle - arrowAngle));
            ctx.moveTo(midX, midY);
            ctx.lineTo(midX - headLength * Math.cos(angle + arrowAngle), midY - headLength * Math.sin(angle + arrowAngle));
            ctx.stroke();
        }

        // Ray drawing function
        function drawRayPath(entryY) {
            // Calculate coordinates
            const entryX = slabX;
            const slope_in = -Math.tan(alpha0_rad);
            const startX = 50;
            const startY = entryY - slope_in * (entryX - startX);

            const slope_ref = -Math.tan(alpha2_rad);
            const exitX = slabX + slabWidth;
            const exitY = entryY + slope_ref * (exitX - entryX);

            const slope_out = slope_in;
            const endX = canvas.width - 50;
            const endY = exitY + slope_out * (endX - exitX);
            
            // Draw ray segments
            ctx.beginPath();
            ctx.moveTo(startX, startY);
            ctx.lineTo(entryX, entryY);
            ctx.lineTo(exitX, exitY);
            ctx.lineTo(endX, endY);
            ctx.stroke();
            
            // Add arrowheads
            drawArrowheadAtMidpoint(startX, startY, entryX, entryY);
            drawArrowheadAtMidpoint(entryX, entryY, exitX, exitY);
            drawArrowheadAtMidpoint(exitX, exitY, endX, endY);
        }

        // Draw the two rays
        drawRayPath(topRayEntryY);
        drawRayPath(bottomRayEntryY);

        // Normal line
        ctx.beginPath();
        ctx.setLineDash([5, 5]);
        ctx.moveTo(130, topRayEntryY);
        ctx.lineTo(slabX, topRayEntryY);
        ctx.stroke();
        ctx.setLineDash([]); // Reset line dash

        // Angle arc
        ctx.beginPath();
        const arcRadius = 40;
        ctx.arc(slabX, topRayEntryY, arcRadius, Math.PI - alpha0_rad, Math.PI);
        ctx.stroke();

        // Add the vertical tick at the point of incidence, as seen in the original image.
        // This is a stylistic element of the angle marker.
        ctx.beginPath();
        ctx.moveTo(slabX, topRayEntryY - 5);
        ctx.lineTo(slabX, topRayEntryY + 5);
        ctx.stroke();

        // Labels
        ctx.fillStyle = 'black';
        ctx.fillText('n₁', 180, 100);
        ctx.fillText('n₂', slabX + slabWidth / 2, 280);
        ctx.fillText('n₁', slabX + slabWidth + 60, 200);

        // Angle label α₀
        ctx.save();
        ctx.textAlign = 'left';
        ctx.font = 'italic 20px Times New Roman';
        ctx.fillText('α', 168, 158);
        ctx.font = 'italic 14px Times New Roman';
        ctx.fillText('0', 179, 163);
        ctx.restore();
    </script>
</body>
</html>